<template>
  <div class="s-login">
    <table></table>
    <div class="s-login-frame">
      <a-form layout="inline" :model="formInline" @submit="handleSubmit" @submit.prevent>
        <!-- 标题 -->
        <div class="s-login-title">{{ title }}</div>
        <!-- 账号输入框 -->
        <a-form-item style="margin: 0">
          <a-input v-model:value="formInline.name" placeholder="账号" class="s-login-input" id="input" autocomplete>
            <template v-slot:prefix>
              <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <p></p>

        <!-- 密码输入框 -->
        <a-form-item style="margin: 0">
          <a-input v-model:value="formInline.password" type="password" placeholder="密码" class="s-login-input" autocomplete id="input-pass">
            <template v-slot:prefix>
              <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
        </a-form-item>
        <p></p>

        <!-- 登录按钮 -->
        <a-form-item style="margin: 0.5vw auto">
          <a-button type="primary" html-type="submit" class="s-login-button" :disabled="!formInline.name || !formInline.password">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="footers">
      <a href="http://beian.miit.gov.cn" class="footers_color" target="_blank">{{footers}}</a>
    </div>
    <particles-bg :bg="true" :canvas='canvasStyle' />
  </div>
</template>

<script lang='ts'>
import { onMounted, reactive, ref, toRefs } from "vue";
import { UserOutlined, LockOutlined } from "@/components/AntDesign/icons/icons";
import { addRoute } from "@/router/index";
import { login } from "@/api/userApi/index";
import createStore from "@/store/index";
import $router from "@/router";
import { $message } from "@/components/AntDesign/message";
import { AxiosResponse } from "axios";
import ParticlesBg from "particles-bg-vue/src/particles-bg/particles/CircleParticles.vue";
import PowerModeInput from "power-mode-input/dist/index.es.js";
interface Data {
  title: string;
  formInline: { name: string; password: string };
  handleSubmit: Function;
}

export default {
  name: "Login",
  components: { UserOutlined, LockOutlined, ParticlesBg },
  setup() {
    onMounted(() => {
      PowerModeInput.make(document.getElementById("input"), {
        height: 5,
        tha: [0, 360],
        g: 0.2,
        num: 5,
        radius: 4,
        circle: true,
        alpha: [0.75, 0.1],
        color: "random",
      });
      PowerModeInput.make(document.getElementById("input-pass"), {
        height: 5,
        tha: [0, 360],
        g: 0.2,
        num: 5,
        radius: 4,
        circle: true,
        alpha: [0.75, 0.1],
        color: "random",
      });
    });
    const data: Data = reactive({
      title: (window as any).$TITLE as string,
      footers: process.env.VUE_APP_FOOTERS as string,
      formInline: {
        name: "",
        password: "",
      },
      async handleSubmit() {
        try {
          const userdata: AxiosResponse = await login({
            name: data.formInline.name,
            password: data.formInline.password,
          });
          await createStore.commit("userdata", { userdata: userdata.data });
          await createStore.commit("token", {
            token: `Bearer ${userdata.data.token}`,
          });
          addRoute();
          $message("success", "登录成功");
          $router.push({ path: "/index" });
        } catch (error) {
          $message("error", error.data.message);
        }
      },
    });

    const canvasStyle = ref({ background: "#000" });
    return {
      ...toRefs(data),
      canvasStyle,
    };
  },
};
</script>
<style lang="less" scoped>
@import "./less/logoin.less";
</style>
